<template>
  <div class="screenShow">
    <div class="top">
      <div ref="lottieRef">
        <div>
          <img src="@/assets/screenShowImg/login_logo.png" alt="" />
          <p>华普智云管理系统</p>
        </div>
      </div>
      <div>
        <div class="content">
          <div>
            <el-button icon="ArrowLeftBold" link @click="back">
              <span>返回菜单页面</span>
            </el-button>
          </div>
          <div>
            <img src="@/assets/screenShowImg/页面图片/天气icon/多云.png" alt="" />
            <p>{{ wendu }}℃</p>
          </div>
        </div>
      </div>
    </div>
    <Content
      ref="Content"
    />
  </div>
</template>

<script lang="ts" setup>
import Content from './content.vue';
import topVideoJson from '../datav/topVideo.json';
import lottie from 'lottie-web';

const lottieRef = ref<HTMLElement | null>(null);
const wendu = ref('26');
const router = useRouter()
const redirect = ref(undefined)

const back = (): void => {
  router.push({ path: redirect.value || '/' })
};

const jsonVideo = (): void => {
  // 声明一个变量来设置lottie 播放属性
  let params: any = {
    container: lottieRef.value, //播放的位置
    renderer: 'svg',
    loop: true, //是否循环播放
    autoplay: true, //是否自动播放
    animationData: topVideoJson, // 加载json的文件名
  };
  lottie.loadAnimation(params); // 加载
};

onMounted(() => {
  jsonVideo();
});
</script>

<style lang="scss" scoped>
@font-face {
  font-family: '优设标题黑';
  src: url('@/assets/fonts/优设标题黑.ttf');
}
@font-face {
  font-family: 'Montserrat-MediumItalic';
  src: url('@/assets/fonts/Montserrat-MediumItalic.otf');
}

.screenShow {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  min-width: 1100px;
  background: url('@/assets/screenShowImg/bg.webp') no-repeat center/cover;
  display: flex;
  flex-direction: column;

  p {
    margin: 0;
  }

  > .top {
    width: 100%;
    flex: 0 0 auto;
    position: relative;

    > div:nth-of-type(1) {
      width: 100%;
      height: 100%;
      position: relative;

      > div {
        height: 100%;
        position: absolute;
        top: -12%;
        left: 0;
        display: flex;
        align-items: center;
        z-index: 1;

        > img {
          height: 60%;
        }

        > p {
          cursor: pointer;
          font-family: '优设标题黑';
          color: black;
          font-size: 2.6rem;
        }
      }
    }

    > div:nth-of-type(2) {
      position: absolute;
      right: 28px;
      top: 0;
      width: 25%;
      height: 100%;

      > .content {
        width: 75%;
        height: 100%;
        position: absolute;
        right: 0;
        display: flex;
        justify-content: space-between;
        
        > div:nth-of-type(1) {
          padding-top: 7%;
          :deep(span) {
            font-style: italic; // 设置为斜体
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); // 添加文字阴影
            font-size: 1.1rem;
            font-family: 'Montserrat-MediumItalic';
          }
        }

        // > div:nth-of-type(2) {
        //   font-family: 'Montserrat-MediumItalic';
        //   width: 44%;
        //   height: 100%;
        //   display: flex;
        //   flex-direction: column;
        //   align-items: center;
        //   padding-top: 5%;
        //   position: relative;

        //   > img {
        //     position: absolute;
        //     top: 17%;
        //     left: -40%;
        //   }

        //   > p:nth-of-type(1) {
        //     font-weight: 700;
        //     font-size: 24px;
        //     line-height: 30px;
        //     letter-spacing: 0.38px;
        //   }

        //   > p:nth-of-type(2) {
        //     font-weight: 400;
        //     font-size: 14px;
        //     line-height: 18px;
        //     text-align: right;
        //     letter-spacing: 0.066px;
        //   }
        // }

        > div:nth-of-type(2) {
          width: 45%;
          height: 100%;
          position: relative;

          > img:nth-of-type(1) {
            position: absolute;
            top: 9%;
            left: 5%;
            width: 32%;
          }

          > p {
            position: absolute;
            top: 14%;
            left: 45%;
            font-size: 30px;
            font-family: 'Montserrat-MediumItalic';
            font-weight: 400;
          }
        }
      }
    }
  }
}
</style>